<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                  <div class="datale">
                    <div class="borebon sonh_g">
                      <ul>
                        <span>账号管理</span>
                        <li><router-link to="/co31">我的资料</router-link></li>
                        <li><router-link to="/co32">安全设置</router-link></li>
                        <li><router-link to="/co33">个人成长信息</router-link></li>
                        <li><router-link to="/co34">个人交易信息</router-link></li>
                      </ul>
                    </div>
                  </div>
                <div class="datare">
                  <div class="ra">个人交易信息</div>
                  <div class="zbhujiwjd"></div>
                    <div class="fome">
                      <el-form ref="form" :model="form" label-width="120px">

                        <el-form-item label="真实姓名">
                          <el-input v-model="form.name" style="width: 25%;"></el-input>
                        </el-form-item>

                        <el-form-item label="登录邮箱地址：">
                          <el-input v-model="form.region" style="width: 25%;"></el-input>
                        </el-form-item>

                        <el-form-item label="性别：">
                          <el-radio-group v-model="form.date1">
                            <el-radio label="男" value="1"></el-radio>
                            <el-radio label="女" value="0"></el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="年龄：">
                          <el-input v-model="form.date2" style="width: 25%;"></el-input>
                        </el-form-item>
                        <el-form-item label="地址信息" prop="selected">         
                          <el-cascader size="large" 
                          :options="options"  
                          v-model="selectedOptions" 
                          @change="handleChange">                  
                          </el-cascader>
                      </el-form-item>   
                        <el-form-item label="详细地址:  ">
                          <el-input v-model="form.resource" style="width: 40%;"></el-input>
                        </el-form-item>
                        <el-form-item label="邮政编码：">
                          <el-input v-model="form.desc" style="width: 25%;"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="danger" @click="onSubmit">保存</el-button>
                          
                        </el-form-item>
                      </el-form>
                    </div>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreF from '@/components/coreF'
import { regionData,CodeToText  } from 'element-china-area-data'
export default {
    components: { 
    Header,
    Footer,
    coreF
    },
    data() {
      return {
        selectedOptions: [],
        options: regionData,
        elcascader:'',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          resource: '',
          desc: '',
        }
      }
      
    },
    methods: {
      handleChange (value) {
        let cs = CodeToText[value[0]]
        let sz = CodeToText[value[1]]
        let dq = CodeToText[value[2]]
        let valone = `${cs}/${sz}/${dq}`
        this.elcascader = valone
        console.log(valone)
      },
      onSubmit() {

      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.floeee {
  float: left;
  display: flex;
  justify-content: space-between;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  height: 635px;
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}

.datale .router-link-exact-active {
  color: #ff9381;
}
.datale a:hover{
  color: #ff9381;
}
.datale {
  width: 216px;
	background-color: #ffffff;
	border-radius: 6px;
  height: 200px;
} 
.ontoi .datale .sonh_g li{
  width: 120px;
} 
.borebon {
  border-bottom: 12px solid #eee;
}
.borebon ul{
  display: inline-block;
  margin-left: 20px;
  
}
.borebon ul span{
  font-size: 24px;
	font-weight: 550;
	font-stretch: normal;
	line-height: 32px;
	letter-spacing: 0px;
	color: #313131;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
.borebon ul li {
      width: 146px;
    line-height: 34px;
    font-size: 15px
}
.zbhujiwjd {
    height: 20px;
    font-size: 20px;
    padding-left: 20px;
    padding-bottom: 12px;
}
.fome {
  margin-top: 20px;
}
</style>